<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   .movebox{
       width: 100px;
       height: 100px;
       background-color: red;
       /*声明调用movebox动画
       默认动画页面加载执行一次
       infinite 循环执行，永不停息
       */
       animation: movebox 2s infinite;

       /*改变默认方式 支持坐标系*/
     position: relative;
   }

  /*定义一个动画 (关键key帧frame)
  动画一帧一帧图片组成，一秒36帧
  from动画开始位置，to动画结束位置
  过程css+html会自动产生中间过程
  动画一定要设置它的坐标系
  */
  @keyframes movebox{
      from{left: 0px;}
      to{left: 100px;}
     
  }
</style>
<body>
    <h3>移动方块动画效果</h3>
    <h5>animation语法</h5>

    <div class="movebox"></div>
</body>
</html>